<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/blog.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>


	</head>
	<body>

		<!-- 头部区域 -->
		<herder>
			<!-- 头部导航栏区域 -->
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user nav_color">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil nav_color">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus nav_color">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart nav_color">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down nav_color ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>


			<!-- 头部导航栏搜索框区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">

				<div class=" " style="background-color: rgba(0,0,0,0.8);">

					<div class="container py-4">

						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">

							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>

							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;">
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i
										 class="fa fa-search text-white"></i></button>

								</form>
							</li>
						</ul>

					</div>


				</div>

			</div>

			<!-- 头部导航栏分栏 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link ">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link ">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="#" class="nav-link defoult">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link ">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link ">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>

		</herder>


		<!-- 中部区域 -->
		<main>

			<!-- 中部雪人区域 -->
			<div class="col-12 pl-0 pr-0 py-5" style="background-image: url(images/choose_bg.jpg);">
				<div class=" py-5 w-100 " style="background-color: rgba(0,0,0,0.3); background: repeat; ">
					<div class=" text-center">
						<h1 class="m-0 font-weight-bold" style="color: #E4606D;">Blog Single</h1>
						<hr class="" style="width: 126px; background-color: #E4606D; margin-top: 7px;">
						<hr class="" style="width: 72px; background-color: #E4606D; margin-top: -12px">
						<p style="color: #E4606D;">Home<i class="text-dark"> / Blog Single</i></p>
					</div>
				</div>
			</div>


			<!-- 中部介绍栏区域 -->
			<div class="bg-white container mt-5">
				<div class="row ">

					<div class="col-lg-7 col-12   py-3">

						<div class="overflow-hidden">
							<img src="images/blog_single.jpg" class="w-100 nav_da">
						</div>


						<div class="mb-5" style="background-color: lightgray;">

							<h4 class="font-weight-bold ">Illuminated Accessories</h4>

							<i class="fa fa-user " style="color: #E4606D;">
								<i style="color: black;">Admin</i>
								<i class="fa fa-calendar pl-2 " style="color: #E4606D;">
									<i style="color: black; ">12 June 2018</i>
									<i class="fa fa-tags pl-2" style="color: #E4606D;"><i style="color: black;">Picture</i></i>
								</i>
							</i>

							<p style="margin-top: 16px;">Pleasure and praising pain was born and will give you a complete account of the
								systems, and expound the actual teaching.</p>

							<p>Collective terms for handicrafts include artisanry, handicrafting, crafting, and handicraftsmanship. The term
								arts and crafts is also applied, especially in the United States and mostly to hobbyists' and children's output
								rather than items crafted for daily use, but this distinction is not formal, and the term is easily confused
								with the Arts and Crafts design movement, which is in fact as practical as it is aesthetic</p>

							<p>These activities were called crafts because originally many of them were professions under the guild system.
								Adolescents were apprenticed to a master craftsman, and refined their skills over a period of years in exchange
								for low wages. By the time their training was complete,they were well equipped to set up in trade for
								themselves, earning their living with the skill that could be traded directly within the community, often for
								goods and services.</p>
							<span class="d-flex justify-content-between flex-md-row flex-column  ">
								<i class="d-flex align-items-center ml-3">
									Tags:<a href="#" class="btn_a ml-1">Decoration</a>
									<a href="#" class="btn_a mx-3">Household</a>
									<a href="#" class="btn_a">Stuff</a>
								</i>

								<i class="d-flex align-items-center ml-3 ">
									Share<a href="#" class="fa fa-facebook ml-2 btn_aa"></a>
									<a href="#" class="fa fa-twitter mx-2 btn_aa"></a>
									<a href="#" class="fa fa-linkedin mr-2 btn_aa"></a>
									<a href="#" class="fa fa-vimeo btn_aa"></a>
								</i>

							</span>

						</div>

						<!-- 中部人物评论区域 -->
						<div class="">

							<h4 class="font-weight-bold ">COMMENTS (2)</h4>

							<ul class="row pl-0 mt-4">
								<li class=" col-2">
									<img src="images/author-1.jpg" class="w-100">
								</li>

								<li class=" col-10 ">

									<div class="d-flex justify-content-between">
										<p class="font-weight-bold">Matt Phillips</p>

										<a href="#" class="fa fa fa-mail-reply-all btn_zhuan">&nbsp;&nbsp;Reply</a>
									</div>


									<p class="m-0" style="color: #E4606D; ">june 7,2018</p>

									<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
										in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

								</li>

								<li class=" col-2 "></li>

								<li class=" col-2 ">

									<img src="images/author-2.jpg" class="w-100">

								</li>

								<li class=" col-8 ">

									<div class="d-flex justify-content-between">
										<p class="font-weight-bold">Darrel Schmidt</p>

										<a href="#" class="fa fa fa-mail-reply-all btn_zhuan">&nbsp;&nbsp;Reply</a>
									</div>


									<p class="m-0" style="color: #E4606D; ">june 7,2018</p>

									<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
										in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

								</li>
							</ul>

						</div>

						<!-- 发表言论的区域 -->
						<div class=" " style="">

							<p class="font-weight-bold text-white py-4 pl-5 m-0">Send A Message</p>

							<div class=" d-flex flex-row m-0">
								<input type="text" class="border-0 bg-white aa " placeholder="Name" style="height: 50px;">
								<input type="text" class="border-0 bg-white ml-3 aa" placeholder="Email">
							</div>

							<div class="mt-4  d-flex flex-row m-0">

								<input type="text" class="border-0 bg-white  bb" placeholder="Subject" style="height: 50px;">
							</div>

							<div class="mt-4 m-0">
								<textarea rows="5" cols="" class="border-0 bb" placeholder="Message"></textarea>
							</div>

							<div class="py-3 pb-5 ">
								<button class=" text-center btn_c" style="border: 1px solid white; width: 170px; height: 48px; line-height: 48px; color: white; background-color: #E4606D;">POST
									COMMENT</button>
							</div>


						</div>


					</div>

					<div class="col-lg-5 col-12 py-3">

						<form class="form-control  d-flex justify-content-between" style=" height: 50px;">
							<input type="text" placeholder="Search" class="border-0" style="outline: none;" />
							<button type="" class="border-0 btn text-muted" style="background-color: white;"><i class="fa fa-search"></i></button>
						</form>

						<h5 class="pt-3">RECENT POST</h5>

						<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0" />

						<!-- 两个小人物图标区域 -->
						<ul class="pl-0 row pt-3">
							<li class="col-3">
								<a href="#" class=""><img src="images/sidebar-post-1.jpg" class="w-100 h-100"></a>
							</li>

							<li class="col-9 p-0">
								<a href="#" class="a_text"><span class="font-weight-bold">Healthy Benefits Of Raw Food And Healthy Diet</span></a>
								<samp class="d-block" style="color: #E4606D;">Dec 30,2016</samp>
							</li>
						</ul>
						<ul class="pl-0 row">
							<li class="col-3">
								<a href="#" class="img_bei"><img src="images/sidebar-post-2.jpg" class="w-100 h-100"></a>
							</li>

							<li class="col-9 p-0">
								<a href="#" class="a_text"><span class="font-weight-bold">Healthy Benefits Of Raw Food And Healthy Diet</span></a>
								<samp class="d-block" style="color: #E4606D;">Jan 01,2018</samp>
							</li>
						</ul>

						<!-- 发表言论区域 -->
						<h5 class="pt-3">BLOG CATEGORIES</h5>

						<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0" />


						<!-- 购物单区域 -->
						<ul class="list-unstyled">
							<!-- 一 -->
							<li class="a_tiao">
								<a href="#" style="text-decoration: none; color: gray; " class=" d-block " class="">Funky Jewelry
									<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">10</span>
									<hr class="w-100 text-muted" />
								</a>

							</li>

							<!-- 二 -->
							<li class="a_tiao">
								<a href="#" style="text-decoration: none; color: gray;" class=" d-block " class="">Knitted Hats
									<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">35</span>
									<hr class="w-100 text-muted" />
								</a>

							</li>

							<!-- 三 -->
							<li class="a_tiao">
								<a href="#" style="text-decoration: none; color: gray; " class=" d-block " class="">Homemade Soap
									<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">40</span>
									<hr class="w-100 text-muted" />
								</a>

							</li>

							<!-- 四 -->
							<li class="a_tiao">
								<a href="#" style="text-decoration: none; color: gray; " class=" d-block " class="">Birthday Cards
									<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">10</span>
									<hr class="w-100 text-muted" />
								</a>

							</li>

							<!-- 五 -->
							<li class="a_tiao">
								<a href="#" style="text-decoration: none; color: gray;" class=" d-block " class="">Tank Tops
									<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">8</span>
									<hr class="w-100 text-muted" />
								</a>

							</li>

						</ul>


						<!-- 大量小图片区域 -->
						<h5 class="pt-3">INSTAGRAM</h5>

						<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0" />

						<ul class="row list-unstyled">
							<li class="col-3  img_p ">
								<a href="#"><img src="images/insta1.jpg" class="w-100"></a>
							</li>

							<li class="col-3  img_p">
								<a href="#"><img src="images/insta2.jpg" class="w-100"></a>
							</li>

							<li class="col-3 img_p ">
								<a href="#"><img src="images/insta3.jpg" class="w-100"></a>
							</li>

							<li class="col-3  img_p">
								<a href="#"><img src="images/insta4.jpg" class="w-100"></a>
							</li>

							<li class="col-3 mt-3 img_p">
								<a href="#"><img src="images/insta5.jpg" class="w-100"></a>
							</li>

							<li class="col-3 mt-3  img_p">
								<a href="#"><img src="images/insta6.jpg" class="w-100"></a>
							</li>

							<li class="col-3 mt-3 img_p">
								<a href="#"><img src="images/insta7.jpg" class="w-100"></a>
							</li>

							<li class="col-3 mt-3 img_p">
								<a href="#"><img src="images/insta8.jpg" class="w-100"></a>
							</li>


						</ul>

						<!-- 多个点击按钮的区域 -->
						<h5 class="pt-3">PRODUCT TAGS</h5>

						<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0" />


						<div class="d-flex flex-row justify-content-around  flex-wrap">
							<a href="#" class="btn_a mt-3 ">Craft</a>

							<a href="#" class="btn_a mt-3  ">Decoration</a>

							<a href="#" class="btn_a mt-3 ">Diy</a>

							<a href="#" class="btn_a mt-3 ">Fashion</a>

							<a href="#" class="btn_a mt-3 ">Lifestyle</a>

							<a href="#" class="btn_a mt-3 ">General</a>
						</div>


					</div>
				</div>
			</div>
		</main>

		<!-- 底部区域 -->
		<footer class="">
			<!-- 五个轮播图区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row d-flex justify-content-center justify-content-sm-center text-center m-0 pl-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>

			<!-- 尾部的导航栏区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 尾部的底部介绍区域-->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a> by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
